/**
 * @author zhangqiang
 * @data 2017/3/14
 *  地址列表
 * */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {getOrderList,myListActive} from '../../actions/orderListActions';
import NoData from '../../components/orderList/noData';
import ListTab from '../../../../../../../src/js/components/order/listTab';
import ListCard from '../../../../../../../src/js/components/order/listCard';
import BottomMenu from '../../../../../../../src/js/components/bottomMenu';
import '../../../styles/orderList.scss'
import style from './index.scss'
import common from '../../../../../../js/utils/common'

class OrderList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            orderList: [],
            isShow: true
        };

        this.cache = [[], [], []];
        this.handleIndexChange = this.handleIndexChange.bind(this);
    }

    /**
     * 生命周期
     */
    componentWillMount() {

    }

    componentWillUnmount() {
    }

    toUrl(url) {
        this.context.router.push(url);
    }

    componentDidMount() {
        common.setViewTitle('我的订单');
        this.handleIndexChange(this.props.myListActive);
    }

    //处理Tab标签变化
    handleIndexChange(index) {
        this.props.dispatch(myListActive(index));
        this.setState({
            isShow: true
        });

        //如已加载则直接读取缓存
        if (this.cache[index] && this.cache[index].length > 0) {
            this.setState({
                orderList: this.cache[index],
                isShow: false
            })
        }
        else {
            let getData = {
                bizFlag: index + 1,
                orderType:1,
            };
            this.props.dispatch(getOrderList(getData, (res) => {
                this.setState({
                    orderList: res.orderList,
                    isShow: false,
                });
                this.cache[index] = res.orderList;
            }))
        }
    }

    bottomHandle(index) {
        if (index == 0) {
            this.context.router.push('/');
        }
        else {
            this.context.router.push('orderList');
        }
    }


    render() {
        return (
            <div className={style.orderList} style={{paddingBottom: '1rem'}}>

                <ListTab handleIndexChange={this.handleIndexChange} initActive={this.props.myListActive}/>
                <div style={{height: '.24rem'}}></div>
                {
                    this.state.isShow ? <div className={style.load}>加载中......</div> :
                        this.state.orderList.length ? this.state.orderList.map((item, index) =>
                            <ListCard
                                key={item.orderId} order={item} icon="./images/icon_cha.png" handleClick={() => {
                                this.toUrl(`orderDetail/${item.orderId}/${item.chargeOrderId}`)
                            }}
                            />
                        ) : <NoData/>
                }

                {/*底部导航菜单start*/}
                <BottomMenu active={1} onChange={(index) => {
                    this.bottomHandle(index);
                }} data={[{
                    text: '查办违章',
                    img: './images/query.png',
                    checkedImg: './images/query_checked.png'
                }, {text: '我的订单', img: './images/my.png', checkedImg: './images/my_checked.png'}]}/>
                {/*底部导航菜单end*/}
            </div>
        )
    }
}

//使用context
OrderList.contextTypes = {
    router: React.PropTypes.object.isRequired
};


OrderList.contextTypes = {
    router: React.PropTypes.object.isRequired
};

function mapStateToProps(state) {
    return Object.assign({}, state.orderList);
}

export default connect(mapStateToProps)(OrderList)